<template>
  <div class="search-bar">
    <a-form ref="form" :model="formData" :layout="layout" v-bind="formProps">
      <div class="custom-search-form">
        <div class="search-columns">
          <custom-form-item
            v-for="column in columns"
            :key="column.field"
            :value="formData[column.field]"
            :field="column.field"
            :formData="formData"
            :slotName="column.slot"
            :formItemProps="column.formItemProps"
            :fieldProps="column.fieldProps"
            :hidden="column.hidden"
            :disabled="column.disabled"
            :type="column.type"
            :title="column.title"
          >
            <template v-for="(_, slot) in $slots" v-slot:[slot]="props">
              <slot :name="slot" v-bind="props" />
            </template>
          </custom-form-item>
        </div>
        <div class="search-actions">
          <a-space>
            <a-button :disabled="disabled" type="primary" @click="$emit('search', formData)" v-if="!hiddenSearchButton">{{ searchText }}</a-button>
            <slot name="actions"></slot>
          </a-space>
        </div>
      </div>
    </a-form>
  </div>
</template>

<script setup lang="ts">

import { ref } from 'vue';
import CustomFormItem from './CustomFormItem.vue'

const formRef = ref<any>(null)

defineEmits(['search']);
defineProps({
    formData: {
      type: Object,
      default: () => {}
    },
    columns: {
      type: Array<any>,
      default: () => []
    },
    layout: {
      type: String,
      default: 'inline'
    },
    formProps: {
      type: Object,
      default: () => {}
    },
    searchText: {
      type: String,
      default: '查询'
    },
    disabled: {
      type: Boolean,
      default: () => false
    },
    hiddenSearchButton: {
      type: Boolean,
      default: () => false
    }
})

defineExpose({
  validate () {
    return formRef.value.validate()
  },
  resetFields () {
    formRef.value.resetFields()
  }
})
</script>


<style lang="less" scoped>
/deep/ .ant-form-item {
  min-height: auto;
}

.search-bar {
  background-color: transparent;
  padding-bottom: 10px;
  border-bottom: 1px solid #333;

  .custom-search-form {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: row;
    background-color: transparent;
    padding: 6px 10px;
    /deep/.ant-form-item {
      display: inline-block;
    }
  }
}
</style>
